<template>
    <el-dialog
       title="金币变化详情表"
       :visible.sync="visible"
       width="50%"
       :before-close="handleClose"
    >
      <div>
        <div class="topInquire">
          <!-- 日期 -->
          <DatePicker @dateChange="handleDateChange"></DatePicker>

          <el-button size="small" icon="el-icon-printer" @click="handleExport">导出</el-button>
          <el-button size="small" type="primary" @click="handleInquire">查询</el-button>
        </div>
        
        <el-table stripe height="500" :data="goldData" border :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="curr" label="当前量" min-width="150"></el-table-column>
            <el-table-column prop="delta" label="变化量" min-width="150"></el-table-column>
            <el-table-column prop="reason" label="变化原因" min-width="300"></el-table-column>
            <el-table-column prop="time" label="时间" min-width="150">
              <template #default="{row}">{{ row.time|formatTime }}</template>
            </el-table-column>
        </el-table>
  
         <!-- 分页 -->
         <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="changePage"
         />
      </div>
    </el-dialog>
  </template>
  
  <script>
  import DatePicker from '@/components/datePicker/index.vue'
  import { export_json_to_excel } from '@/widget/Export2Excel'

  export default {
    components: { DatePicker },
    props: {
     visible: Boolean,
     total:Number,
     goldData:{
      type: Array,
      default: () => ([])
    }
   },
    data() {
      return {
        currentPage: 1, // 当前页
        pageSize: 200, // 每页显示条数
        date:[]
      };
    },
    methods: {
    
    // 选择日期
    handleDateChange(dateRange){
       this.date = dateRange
    },

    // 查询
    handleInquire(){
        try {
        const query = { page: this.currentPage, limit: this.pageSize }

        if (this.date && this.date.length === 2) {
          // 时间戳毫秒转化为秒
          query.startTime = this.$moment(this.date[0]).unix()
          query.endTime = this.$moment(this.date[1]).unix()
        }
        this.$emit('child-inquire',query)

      } catch (error) {
        console.error(error)
        this.$message.error('发生错误，请稍后重试')
      }
    },

    // 关闭弹窗
    handleClose() {
      this.$emit('update:visible', false)
    },

    // 切换页面
    changePage(page) {
      this.$emit('child-inquire',{page:page,limit:this.pageSize})
    },

    // 导出
    async handleExport() {
      try {
        // 处理导出数据
        const exportData = this.goldData.map(i => {
          // 时间
          const time = this.$options.filters.formatTime(i.time)
          return { ...i,time }
        })
  
        const newData = exportData.map(item => {
          const arr = []
          const obj = {
            curr: '当前量',
              delta: '变化量',
              reason: '变化原因',
              time: '日期',
          }
          for (const key in obj) {
            arr.push(item[key])
          }
          return arr
        })
  
        const tHeader = ['当前量','变化量', '变化原因', '日期']
  
        export_json_to_excel({
          header: tHeader,
          data: newData,
          filename: `金币变化详情表${this.$moment(new Date()).format('YYYYMMDDHHmm')}`,
          autoWidth: true,
          bookType: 'xlsx'
        })
      } catch (error) {
        this.$message.error(error)
      }
    },

    }
  }
  </script>

  <style scoped>
 .topInquire{
    font-weight: bold;
    font-size: 14px;
    color: #6a7488;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
  </style>